<template>
    <div class="linChart" ref="chartContainer"></div>
</template>

<script setup lang="ts">
import LeftNav from '@/view/digitalProduction/components/leftNav.vue';
import * as echarts from 'echarts';

const props = defineProps({
    data: {
        type: Array,
        required: true
    },
});
let lineData = [
    { date: '1', value: 60 },
    { date: '2', value: 120 },
    { date: '3', value: 100 },
    { date: '4', value: 170 },
    { date: '5', value: 140 },
    { date: '6', value: 130 },
    { date: '7', value: 150 },
    { date: '8', value: 180 },
    { date: '9', value: 110 },
    { date: '10', value: 110 },
    { date: '11', value: 70 },
    { date: '12', value: 130 },
] as any
const chartContainer = ref(null);
let myChart = null as any;

const updateChart = () => {
    if (!chartContainer.value) return;

    // Initialize the chart
    myChart = echarts.init(chartContainer.value);

    // Define chart options
    const option = {
        grid: {
            top: '20%',//生成的echarts图片和顶部的距离
            bottom: '2%',//echarts图片和底部的距离
            left: '1%',//echarts图片和左边的距离
            right: '0%',//echarts图片和右边的间距,
            containLabel: true,//当containLabel:为ture时，以上设置生效
        },
        xAxis: {
            type: 'category',
            data: props.data.map((item: any) => item.date),
            axisTick: { show: false },
            name: '月份',
            nameTextStyle: {
                color: '#FFFFFF',
                fontWeight: "normal",
                fontSize: 8,
                verticalAlign: "top",
                lineHeight: 27
            },
            boundaryGap: false,
            axisLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.3)"
                }
            },
            axisLabel: {
                show: true,
                fontSize: 10,
                color: "rgba(255, 255, 255, 1)"
            },

        },
        yAxis: [{
            type: 'value',
            // boundaryGap: true,
            axisTick: { show: false },
            name: 'kwh/t',
            nameTextStyle: {
                color: '#FFFFFF',
                fontSize: 10,
                align: "right",
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.1)"
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.3)"
                }
            },
            axisLabel: {
                show: true,
                fontSize: 10,
                color: "rgba(255, 255, 255, 1)"
            }
        },
        {
            type: 'value',
            // boundaryGap: true,
            axisTick: { show: false },
            position: "right",
            min: 0,
            max: 100,
            nameTextStyle: {
                color: '#FFFFFF',
                fontSize: 10,
                // align: "right",
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.1)"
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.3)"
                }
            },
            axisLabel: {
                show: true,
                formatter: "{value}%",
                fontSize: 10,
                color: "rgba(255, 255, 255, 1)"
            }
        }],
        tooltip: {
            trigger: 'axis'
        },
        series: [{
            // name: "",
            type: "bar",
            barWidth: 5,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: "rgba(0,227,254,1.00)"
                        },
                        {
                            offset: 1,
                            color: "rgba(0,227,254,1.00)" // 同样的颜色，因为渐变只在 0% 位置出现
                        }
                    ])
                }
            },
            data: props.data.map((item: any) => item.value)
        },
        {
            data: ['20', '40', '50', '30', '60', '80', '50', '60', '70', '80', '50', '80'],
            // name: '发电量',
            type: 'line',
            yAxisIndex: 1,
            smooth: false,
            showAllSymbol: true,
            symbol: 'emptyCircle',
            symbolSize: 5,
            itemStyle: {
                normal: {
                    color: 'rgba(237, 169, 21, 1)'
                },
            },
            lineStyle: {
                color: 'rgba(237, 169, 21, 1)',
                width: 1,
            },

        }]

    };
    console.log(option);


    // Set options
    myChart.setOption(option);

    // Handle resize
    window.addEventListener('resize', () => {
        myChart.resize();
    });
};

// Watch for data changes and update the chart
watch(() => props.data, () => {
    if (myChart) {
        updateChart();
    }
}, { immediate: true });

onMounted(() => {
    updateChart();
});
</script>

<style lang="scss" scoped>
.linChart {
    width: 100%;
    height: vh(220);
}
</style>